iT邦幫忙

DAY 19
0

我在前端 ng 時系列 第 19

初談 directive - 番外篇 - 傳送函式進 directive

  • 分享至 

  • xImage
  •  

快樂的星期五到了!!!
期待假日的同時,決定快速且優雅地寫完今天這一篇。

在 「初談 directive - isolate scope」 篇有寫到 ‘&’ 的作法,可傳送 function 到 parent scope,讓 directive 呼叫。
範例:完成簡單的選擇顏色器
http://plnkr.co/edit/ZeEj9GolVUhowvJ1UL50

<!-- 注意:一定要定義 method argument 
    不可以只定義 color-picker="updateStyle" -->
<div color-picker=“updateStyle(name, red, green, blue)"></div>






angular.module('myExample', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.myStyle = {'background-color': 'rgb(120,120,120)'};
    $scope.name = 'luffy';
    $scope.updateStyle = function (name, red, green, blue) {
      // output luffy,可以取得 parent scope (此 controller) 自己的參數
      console.log('name', name);
        $scope.myStyle['background-color'] = 'rgb('+ red + ',' + green + ',' + blue + ')';
    }
  }]).directive('colorPicker', function() {
    return {
      restrict: 'A',
      scope: {
          action: '&colorPicker'
      },
      template:
        '<input type="number" ng-model="red" min="0" max="255" ng-change="updateColor()">' +
        '<input type="number" ng-model="green" min="0" max="255" ng-change="updateColor()">' +
        '<input type="number" ng-model="blue" min="0" max="255" ng-change="updateColor()">',
      link: function (scope, element, attrs) {
          scope.red = 120;
          scope.green = 120;
          scope.blue = 120;
         
          scope.updateColor = function () {

            // 順序不用跟 HTML 一樣,可是 key 要一樣
            scope.action({'red': scope.red, 'green': scope.green, 'blue': scope.blue});
          };
      }
    };
  });

此範例中,我們需要注意的是在呼叫 directive function 的 argument key 需要跟在 HTML 定義的 argument 一模一樣。
我們才可以找到對應的值。

<div color-picker=“updateStyle(name, red, green, blue)"></div>
scope.action({'red': scope.red, 'green': scope.green, 'blue': scope.blue});
( name 是 controller 屬性,不需要額外定義)

假如不想用 scope 的方式傳 function,可以改用 $parse 去解析 element attributes。
這樣就可以完成不是 isolate scope 又可以使用 function 的 directive。

修改上面範例
http://plnkr.co/edit/VZCIocZGV0JHRL6zJIRN

截取片段:

var update = $parse(attrs.colorPicker);
scope.updateColor = function () {
     // 因為是 isolated scope, 需要 call scope.$parent
     update(scope.$parent, {'blue': scope.blue, 'red' : scope.red, 'green': scope.green});
};

AngularJS 就是使用 $parse 寫 event directive,並且傳 $event 參數給我們取用。
AngularJS event directive code


上一篇
初談 directive - 完結
下一篇
開發 AngularJS 的工具 - gulp
系列文
我在前端 ng 時30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言